<template>
  <view class="container">
    <view class="navbar">
      <view class="navbar-title">复查项目</view>
    </view>
    
    <scroll-view class="content" scroll-y>
      <!-- 空状态 -->
      <view v-if="reviewList.length === 0" class="empty-state">
        <text>您当前未添加任何复查项目，请先添加您的复查项目</text>
      </view>
      
      <!-- 项目列表 -->
      <view v-else class="review-list">
        <view 
          class="review-card" 
          v-for="item in reviewList" 
          :key="item.id"
          :class="getProjectClass(item.projectName)"
          @click="goChangeReview(item)"
        >
          <!-- 左侧 2/3 -->
          <view class="card-left">
            <view class="project-name">项目：{{ item.projectName }}</view>
            <view class="review-time">复查时间：{{ formatDate(item.reviewTime) }}</view>
            <view class="appointment-time">预约时间：{{ formatDate(item.appointmentTime) }}</view>
          </view>
          
          <!-- 中间 1/6 -->
          <view class="card-middle" :class="{ expired: isExpired(item.reviewTime) }">
            <text>{{ isExpired(item.reviewTime) ? '已过期' : '未过期' }}</text>
          </view>
          
          <!-- 右侧 1/6 -->
          <view class="card-right" :class="{ uploaded: item.images }">
            <text>{{ item.images ? '已上传' : '未填报' }}</text>
          </view>
        </view>
      </view>
    </scroll-view>
    
    <!-- 添加按钮 - 固定在底部 -->
    <view class="add-button" @click="goAddReview">
      <text>添加</text>
    </view>
  </view>
</template>

<script>
import config from '../../config.js';

export default {
  data() {
    return {
      reviewList: []
    };
  },
  onLoad() {
    this.getReviewInfo();
  },
  // 每次页面显示时都会执行
  onShow() {
    this.getReviewInfo();
  },
  methods: {
    // 获取复查项目信息
    getReviewInfo() {
      const hospitalNumber = uni.getStorageSync('hospitalNumber');
      uni.request({
        url: `${config.baseUrl}/puwai/getReviewInfo`,
        method: 'GET',
        data: {
          hospitalNumber: hospitalNumber
        },
		header: {
          'Content-Type': 'application/json',
          'Authorization': uni.getStorageSync('token') || ''
        },
        success: (res) => {
          if (res.data && res.data.code === 1) {
            this.reviewList = res.data.data;
          } else {
            uni.showToast({
              title: res.data.msg || '获取复查项目失败',
              icon: 'none'
            });
          }
        },
        fail: (err) => {
          console.error('获取复查项目失败:', err);
          uni.showToast({
            title: '获取复查项目失败',
            icon: 'none'
          });
        }
      });
    },
    
    // 判断是否过期
    isExpired(reviewTime) {
      const now = new Date();
      now.setHours(0, 0, 0, 0);
      
      const reviewDate = new Date(reviewTime);
      reviewDate.setHours(0, 0, 0, 0);
      
      return reviewDate < now;
    },
    
    // 根据项目名称获取样式类
    getProjectClass(projectName) {
      switch (projectName) {
        case '甲功':
          return 'project-thyroid';
        case '血钙':
          return 'project-calcium';
        case '颈部超声':
          return 'project-ultrasound';
        default:
          return 'project-other';
      }
    },
    
    // 格式化日期
    formatDate(dateStr) {
      if (!dateStr) return '';
      const date = new Date(dateStr);
      return `${date.getFullYear()}-${(date.getMonth() + 1).toString().padStart(2, '0')}-${date.getDate().toString().padStart(2, '0')}`;
    },
    
    // 跳转到添加页面
    goAddReview() {
      uni.navigateTo({
        url: '/pages/setReview/addReview'
      });
    },
    
    // 跳转到修改页面
    goChangeReview(item) {
      uni.setStorageSync('currentReviewItem', item);
      uni.navigateTo({
        url: `/pages/setReview/changeReview?id=${item.id}`
      });
    }
  }
};
</script>

<style scoped>
.container {
  background-color: #f8f9fa;
  min-height: 100vh;
  position: relative; /* 相对定位，作为按钮的定位参考 */
  padding-bottom: 100rpx; /* 为底部按钮留出空间 */
  box-sizing: border-box;
}

.navbar {
  height: 44px;
  background-color: #1677ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.navbar-title {
  font-size: 17px;
  font-weight: bold;
}

.content {
  width: 100%;
  min-height: calc(100vh - 44px - 100rpx); /* 减去导航栏和按钮高度 */
  padding: 20rpx;
  box-sizing: border-box;
}

.empty-state {
  background-color: #eee;
  height: 300rpx;
  border-radius: 10rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 20rpx;
  color: #666;
}

.review-list {
  display: flex;
  flex-direction: column;
  gap: 15rpx;
}

.review-card {
  display: flex;
  width: 100%;
  border-radius: 10rpx;
  overflow: hidden;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
}

.card-left {
  flex: 2;
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
}

.card-middle {
  flex: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #fff;
}

.card-middle.expired {
  background-color: #eee;
}

.card-right {
  flex: 0.5;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #eee;
}

.card-right.uploaded {
  background-color: #fff;
}

.project-thyroid .card-left {
  background-color: #e6f7ff;
}

.project-calcium .card-left {
  background-color: #fff7e6;
}

.project-ultrasound .card-left {
  background-color: #e6fffb;
}

.project-other .card-left {
  background-color: #f6f6f6;
}

/* 固定在底部的添加按钮 */
.add-button {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #1677ff;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  z-index: 10; /* 确保按钮在内容上方 */
}
</style>
